<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <el-form inline>
            <el-form-item>
                <el-input placeholder="用户名" size="normal" v-model="searchName.username"></el-input>
            </el-form-item>
            <el-from-item style="margin-right:10px">
                <el-button type="primary" size="default" class="el-icon-search" @click="searchUser">查询</el-button>
            </el-from-item>
            <el-from-item>
                <el-button size="default" plain @click="clear">清空</el-button>
            </el-from-item>
        </el-form>

        <div style="margin-bottom:20px">
            <el-button type="primary" size="small" @click="addUser" v-if="$hasBP('btn.User.add')">添加</el-button>
            <el-button type="danger" size="small" plain @click="deleteAll" v-if="$hasBP('btn.User.remove')">批量删除
            </el-button>
        </div>

        <el-table border stripe :data="userList" style="margin:20px 0" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50px"></el-table-column>
            <el-table-column label="序号" type="index" width="80px"></el-table-column>
            <el-table-column label="用户名" prop="username"></el-table-column>
            <el-table-column label="用户昵称" prop="nickName"></el-table-column>
            <el-table-column label="角色列表" prop="roleName"></el-table-column>
            <el-table-column label="创建时间" prop="gmtCreate"></el-table-column>
            <el-table-column label="更新时间" prop="gmtModified"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="{row, $index}">
                    <el-button type="info" size="small" class="el-icon-user-solid" @click="setRole(row)"
                        v-if="$hasBP('btn.User.assgin')"></el-button>
                    <el-button type="warning" class="el-icon-edit-outline" size="small" style="margin-right:10px"
                        @click="changeUser(row)" v-if="$hasBP('btn.User.update')">
                    </el-button>
                    <el-popconfirm :title="`确定要删除${row.username}吗？`" width="250px" :icon="Delete"
                        @confirm="remove(row)">
                        <el-button type="danger" size="small" slot="reference" class="el-icon-delete"
                            v-if="$hasBP('btn.User.remove')"></el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>


        <!-- 分页器 -->
        <el-pagination background layout="prev, pager, next, jumper, ->, sizes,total" :total="total"
            :page-sizes="[3, 5, 7]" :page-size="limit" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page.sync="page">
        </el-pagination>


        <!-- 添加弹窗 -->
        <el-dialog :visible.sync="show" :title="user.id ? '修改用户' : '添加用户'">
            <el-form style="width: 80%" label-width="100px" :model="user">
                <el-form-item label="用户名" prop="username">
                    <el-input autocomplete="off" v-model="user.username"></el-input>
                </el-form-item>
                <el-form-item label="用户昵称" prop="nickName">
                    <el-input autocomplete="off" v-model="user.nickName"></el-input>
                </el-form-item>
                <el-form-item label="用户密码" prop="password">
                    <el-input autocomplete="off" v-model="user.password"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="show = false">取消</el-button>
                <el-button type="primary" @click="addOrUpdate">确定</el-button>
            </div>
        </el-dialog>

        <!-- 设置角色弹窗 -->
        <el-dialog title="设置角色" :visible.sync="show1" width="30%">
            <el-form label-width="80px" :inline="false" size="normal">
                <el-form-item label="用户名">
                    <el-input disabled :value="user.username"></el-input>
                </el-form-item>
                <el-form-item label="角色列表">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="checkAllRole">全选
                    </el-checkbox>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group v-model="assignRoles">
                        <el-checkbox v-for="role in roleList" :key="role.id" :label="role.id" @change="checkRoleChange">
                            {{ role.roleName }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>

            <span slot="footer">
                <el-button @click="addRole">保存</el-button>
                <el-button type="primary" @click="show1 = false">取消</el-button>
            </span>
        </el-dialog>


    </el-card>

</template>

<script>

export default {
    data() {
        return {
            total: 0,
            page: 1,
            limit: 5,
            searchName: {
                username: ''
            },
            searchObj: {  //搜索到的用户
                username: ''
            },
            userList: [],  //用户列表
            roleList: [], //所有角色列表
            assignRoles: [],  //拥有角色列表
            show: false,  //添加角色弹窗的标记
            show1: false, //设置角色弹窗的标记

            user: {},  //要操作的用户
            checkAll: false,  //是否全选
            isIndeterminate: false,    //标识全选框的不确定状态
            ids: []  //想要删除的id集合
        }
    },
    mounted() {
        this.getUserList()
    },
    methods: {
        //获取用户列表
        async getUserList(page = 1) {
            let result = await this.$API.user.getPageList(page, this.limit, this.searchObj)
            let { items, total } = result.data
            this.total = total
            this.userList = items
        },


        //查询用户
        async searchUser() {
            this.searchObj = { ...this.searchName }
            this.getUserList()
        },

        //清空按钮
        clear() {
            //清空输入框  重新发请求
            this.searchName = {
                username: ''
            }
            this.searchObj = {
                username: ''
            }
            this.getUserList()
        },

        //添加用户
        addUser() {
            //清除数据
            this.user = {
                username: '',
                nickName: '',
                password: ''
            }
            this.show = true
        },

        //添加/修改的回调
        async addOrUpdate() {
            const user = this.user
            if (user.id) {
                let result = await this.$API.user.update(user)
            } else {
                let result = await this.$API.user.add(user)
            }
            this.show = false
            this.getUserList(user.id ? this.page : 1)
        },

        //修改用户
        changeUser(user) {
            this.user = { ...user }
            this.show = true
        },

        //删除用户
        async remove(user) {
            let result = await this.$API.user.removeById(user.id)
            this.$message({
                type: 'success',
                message: '删除成功!'
            })
            //重新获取列表(当前页还有数据显示当前页 没有显示上一页)
            if (this.userList.length == 1) {
                this.getUserList(this.page - 1)
            }
            this.getUserList(this.page)
        },

        //显示设置角色弹窗
        setRole(user) {
            this.user = user
            this.show1 = true
            this.getRoleList()
        },


        //获取角色列表
        async getRoleList() {
            let result = await this.$API.user.getRoles(this.user.id)
            let { allRolesList, assignRoles } = result.data
            this.assignRoles = assignRoles.map(item => item.id)
            this.roleList = allRolesList
        },


        //角色选择改变的回调
        checkRoleChange(value) {
            this.checkAll = this.assignRoles.length === this.roleList.length
            this.isIndeterminate = this.assignRoles.length > 0 && this.assignRoles.length < this.roleList.length
            console.log(this.isIndeterminate)
        },

        //全选按钮的回调
        checkAllRole(value) {
            this.assignRoles = value ? this.roleList.map(item => item.id) : []
            // 如果当前不是全选也不全不选时, 指定为false
            this.isIndeterminate = false
        },

        //给用户添加角色
        async addRole() {
            let userId = this.user.id
            let roleIds = this.assignRoles.join(',')
            let result = await this.$API.user.assignRoles(userId, roleIds)
            this.show1 = false
            //刷新列表
            this.getUserList()
        },

        //批量删除用户
        async deleteAll() {
            let result = await this.$API.user.removeUsers(this.ids)
            console.log(result)
            this.getUserList()
        },


        //表格中数据选中状态改变的回调
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            console.log(this.ids)
        },


        //分页器
        //更改条数
        handleSizeChange(limit) {
            this.limit = limit
            this.getUserList(1)
        },

        //更改页码
        async handleCurrentChange(page) {
            this.page = page
            let result = await this.$API.user.getPageList(page, this.limit)
            let { items, total } = result.data
            this.total = total
            this.userList = items
        },




    },
}
</script>

<style>

</style>
  